<div class="main-container enclosing-container">
  <div class="settings-header">
    <div class="section-title-group">
      <div>
        <h2 class="settings-title">
          <i class="pi pi-server"></i>
          Email Providers
        </h2>
        <p class="settings-description">
          Configure email-sending services like Gmail, Outlook, or custom SMTP servers for sending books via email. The default email provider will be used for 'Quick Book Send' located in the Book Card menu.
        </p>
      </div>
      <p-button
        icon="pi pi-plus"
        label="Create Provider"
        severity="success"
        size="small"
        [outlined]="true"
        (onClick)="openCreateProviderDialog()">
      </p-button>
    </div>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="table-card">
        <p-table [value]="emailProviders" [scrollable]="true" scrollHeight="flex">
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 5%;">
                <div class="header-content">
                  <i class="pi pi-star"></i>
                  <span>Default</span>
                </div>
              </th>
              <th style="width: 20%;">
                <div class="header-content">
                  <i class="pi pi-tag"></i>
                  <span>Name</span>
                </div>
              </th>
              <th style="width: 14%;">
                <div class="header-content">
                  <i class="pi pi-server"></i>
                  <span>Host</span>
                </div>
              </th>
              <th style="width: 5%;">
                <div class="header-content">
                  <i class="pi pi-link"></i>
                  <span>Port</span>
                </div>
              </th>
              <th style="width: 13%;">
                <div class="header-content">
                  <i class="pi pi-user"></i>
                  <span>Username</span>
                </div>
              </th>
              <th style="width: 11%;">
                <div class="header-content">
                  <i class="pi pi-lock"></i>
                  <span>Password</span>
                </div>
              </th>
              <th style="width: 11%;">
                <div class="header-content">
                  <i class="pi pi-envelope"></i>
                  <span>From Address</span>
                </div>
              </th>
              <th style="width: 4%;" class="permission-header">Auth</th>
              <th style="width: 5%;" class="permission-header">StartTLS</th>
              @if (isAdmin) {
                <th style="width: 5%;" class="permission-header">
                  <div class="header-content">
                    <i class="pi pi-share-alt"></i>
                    <span>Shared</span>
                  </div>
                </th>
              }
              <th style="width: 7%;" class="actions-header">
                <div class="header-content">
                  <i class="pi pi-pencil"></i>
                  <span>Edit</span>
                </div>
              </th>
              <th style="width: 8%;" class="actions-header">
                <div class="header-content">
                  <i class="pi pi-trash"></i>
                  <span>Delete</span>
                </div>
              </th>
            </tr>
          </ng-template>

          <ng-template pTemplate="body" let-provider>
            <tr>
              <td class="text-center">
                <p-radioButton
                  name="defaultProvider"
                  [value]="provider.id"
                  [(ngModel)]="defaultProviderId"
                  (onClick)="setDefaultProvider(provider)">
                </p-radioButton>
              </td>

              <td>
                @if (provider.isEditing) {
                  <input type="text" [(ngModel)]="provider.name" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <div class="flex align-items-center gap-2">
                    <span>
                      {{ provider.name }}
                      @if (provider.shared) {
                        <span class="shared-badge" pTooltip="Shared provider">S</span>
                      }
                    </span>
                  </div>
                }
              </td>

              <td>
                @if (provider.isEditing) {
                  <input type="text" [(ngModel)]="provider.host" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <span>{{ provider.host }}</span>
                }
              </td>

              <td>
                @if (provider.isEditing) {
                  <input type="number" [(ngModel)]="provider.port" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <span>{{ provider.port }}</span>
                }
              </td>

              <td>
                @if (provider.isEditing) {
                  <input type="text" [(ngModel)]="provider.username" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <span>{{ provider.username }}</span>
                }
              </td>

              <td>
                @if (provider.isEditing) {
                  <input [(ngModel)]="provider.password" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <span class="password-hidden">Hidden</span>
                }
              </td>

              <td>
                @if (provider.isEditing) {
                  <input type="text" [(ngModel)]="provider.fromAddress" class="p-inputtext w-full" size="small"/>
                }
                @if (!provider.isEditing) {
                  <span>{{ provider.fromAddress }}</span>
                }
              </td>

              <td class="text-center">
                <p-checkbox
                  [(ngModel)]="provider.auth"
                  [binary]="true"
                  [disabled]="!provider.isEditing">
                </p-checkbox>
              </td>

              <td class="text-center">
                <p-checkbox
                  [(ngModel)]="provider.startTls"
                  [binary]="true"
                  [disabled]="!provider.isEditing">
                </p-checkbox>
              </td>

              @if (isAdmin) {
                <td class="text-center">
                  <p-checkbox
                    [(ngModel)]="provider.shared"
                    [binary]="true"
                    (onChange)="toggleShared(provider)"
                    pTooltip="Share this provider with all users">
                  </p-checkbox>
                </td>
              }

              <td class="actions-cell">
                @if (!provider.isEditing) {
                  <p-button
                    [icon]="canModifyProvider(provider) ? 'pi pi-pencil' : 'pi pi-lock'"
                    [severity]="canModifyProvider(provider) ? 'info' : 'secondary'"
                    size="small"
                    [outlined]="true"
                    [rounded]="true"
                    [disabled]="!canModifyProvider(provider)"
                    (onClick)="canModifyProvider(provider) && toggleEdit(provider)"
                    [pTooltip]="canModifyProvider(provider) ? 'Edit provider' : 'Cannot edit shared provider from another user'"
                    tooltipPosition="left">
                  </p-button>
                }
                @if (provider.isEditing) {
                  <div class="flex gap-1">
                    <p-button
                      icon="pi pi-check"
                      severity="success"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="saveProvider(provider)"
                      pTooltip="Save changes">
                    </p-button>
                    <p-button
                      icon="pi pi-times"
                      severity="danger"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="toggleEdit(provider)"
                      pTooltip="Cancel">
                    </p-button>
                  </div>
                }
              </td>

              <td class="actions-cell">
                <p-button
                  [icon]="canModifyProvider(provider) ? 'pi pi-trash' : 'pi pi-lock'"
                  [severity]="canModifyProvider(provider) ? 'danger' : 'secondary'"
                  size="small"
                  [outlined]="true"
                  [rounded]="true"
                  [disabled]="!canModifyProvider(provider)"
                  (onClick)="canModifyProvider(provider) && deleteProvider(provider)"
                  [pTooltip]="canModifyProvider(provider) ? 'Delete provider' : 'Cannot delete shared provider from another user'"
                  tooltipPosition="left">
                </p-button>
              </td>
            </tr>
          </ng-template>

          <ng-template pTemplate="emptymessage">
            <tr>
              <td [attr.colspan]="isAdmin ? 12 : 11">
                <div class="empty-message">
                  <i class="pi pi-envelope"></i>
                  <p class="empty-title">No email providers found</p>
                  <p class="empty-subtitle">Create your first email provider to start sending books</p>
                </div>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</div>
